<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	import {
		parseTime
	} from '@/utils/ruoyi'
	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			showtype: {
				type: String,
				default: '电压'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				x: [],
				t: [],
				v: [],
				a: [],
				colorList : ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
			}
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				// setInterval(function() {
				// 	that.t.push(Math.random() * 10).toFixed(2);
				// 	that.a.push(Math.random() * 10).toFixed(2);
				// 	that.v.push(Math.random() * 10).toFixed(2);
				// 	that.x.push(parseTime(new Date(),'{h}:{i}:{s}'));
				// 	that.initChart();
				// }, 2000);
			})
		},
		beforeDestroy() {
			that.a = [];
			that.v = [];
			that.x = [];
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			setnums(a, v, t,falg) {
				let that = this;
				//that.t.push(t);
				// that.a = [];
				// that.v = [];
				// that.x = [];
				if(falg){
					that.a = [];
					that.v = [];
					that.x = [];
				}
				that.a.push(a);
				that.v.push(v);
				that.x.push(parseTime(new Date(), '{h}:{i}:{s}'));
				if(that.a.length>=50){
					that.a.splice(0,1);
					that.v.splice(0,1);
					that.x.splice(0,1);
				}
				that.$nextTick(() => {
					that.initChart();
				})
			},
			close(){
				this.a = [];
				this.v = [];
				this.x = [];
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
					 // backgroundColor: '#fff',
					    title: {
					        text: '实时电压电流数据',
					        textStyle: {
					            fontSize: 12,
					            fontWeight: 400
					        },
					        left: 'center',
					        top: '5%'
					    },
					    legend: {
					        icon: 'circle',
					        top: '5%',
					        right: '5%',
					        itemWidth: 6,
					        itemGap: 20,
					        textStyle: {
					            color: '#556677'
					        }
					    },
						// toolbox: {
						// 	feature: {
						// 		dataView: {
						// 			show: true,
						// 			readOnly: false
						// 		},
						// 		magicType: {
						// 			show: true,
						// 			type: ['line', 'bar','pie']
						// 		},
						// 		restore: {
						// 			show: true
						// 		},
						// 		saveAsImage: {
						// 			show: true
						// 		}
						// 	}
						// },
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            label: {
					                show: true,
					                backgroundColor: '#fff',
					                color: '#556677',
					                borderColor: 'rgba(0,0,0,0)',
					                shadowColor: 'rgba(0,0,0,0)',
					                shadowOffsetY: 0
					            },
					            lineStyle: {
					                width: 0
					            }
					        },
					        backgroundColor: '#fff',
					        textStyle: {
					            color: '#5c6c7c'
					        },
					        padding: [10, 10],
					        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
					    },
					    grid: {
					        top: '15%',
							left:'3%',
							right:'3%',
							bottom:'10%',
					    },
					    xAxis: [{
					        type: 'category',
					        data: that.x,
					        axisLine: {
					            lineStyle: {
					                color: '#DCE2E8'
					            }
					        },
					        axisTick: {
					            show: false
					        },
					        axisLabel: {
					            interval: 10,
					            textStyle: {
					                color: '#556677'
					            },
					            // 默认x轴字体大小
					            fontSize: 12,
					            // margin:文字到x轴的距离
					            margin: 15
					        },
					        axisPointer: {
					            label: {
					                // padding: [11, 5, 7],
					                padding: [0, 0, 10, 0],
					                /*
					    除了padding[0]建议必须是0之外，其他三项可随意设置
					    
					    和CSSpadding相同，[上，右，下，左]
					    
					    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
					    
					    padding[2]的10:
					    
					    10 = 文字距下边线的距离 + 下边线的宽度
					                
					    如：UI图中文字距下边线距离为7 下边线宽度为2
					    
					    则padding: [0, 0, 9, 0]
					                
					                */
					                // 这里的margin和axisLabel的margin要一致!
					                margin: 15,
					                // 移入时的字体大小
					                fontSize: 12,
					                backgroundColor: {
					                    type: 'linear',
					                    x: 0,
					                    y: 0,
					                    x2: 0,
					                    y2: 1,
					                    colorStops: [{
					                        offset: 0,
					                        color: '#fff' // 0% 处的颜色
					                    }, {
					                        // offset: 0.9,
					                        offset: 0.86,
					                        /*
					0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
					                        
					                        */
					                        color: '#fff' // 0% 处的颜色
					                    }, {
					                        offset: 0.86,
					                        color: '#33c0cd' // 0% 处的颜色
					                    }, {
					                        offset: 1,
					                        color: '#33c0cd' // 100% 处的颜色
					                    }],
					                    global: false // 缺省为 false
					                }
					            }
					        },
					        boundaryGap: true
					    }],
					    yAxis: [{
							type: 'value',
					        name: '电压',
					        min: 0,
					        max: 80,
					        interval: 20,
					        axisLabel: {
					        	formatter: '{value} V'
					        }
					    }, {
					        type: 'value',
					        position: 'right',
					       name: '电流',
					       min: -30,
					       max: 50,
					       interval: 10,
					       axisLabel: {
					       	formatter: '{value} A'
					       }
					    }],
					    series: [{
					            name: '电压',
					            type: 'line',
					            data: that.v,
					            symbolSize: 1,
					            symbol: 'circle',
					            smooth: true,
					            yAxisIndex: 0,
					            showSymbol: false,
					            lineStyle: {
					                width: 5,
					                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
					                        offset: 0,
					                        color: '#9effff'
					                    },
					                    {
					                        offset: 1,
					                        color: '#9E87FF'
					                    }
					                ]),
					                shadowColor: 'rgba(158,135,255, 0.3)',
					                shadowBlur: 10,
					                shadowOffsetY: 20
					            },
					            itemStyle: {
					                normal: {
					                    color: that.colorList[0],
					                    borderColor: that.colorList[0]
					                }
					            }
					        }, {
					            name: '电流',
					            type: 'line',
					            data: that.a,
					            symbolSize: 1,
					            symbol: 'circle',
					            smooth: true,
					            yAxisIndex: 1,
					            showSymbol: false,
					            lineStyle: {
					                width: 5,
					                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
					                        offset: 0,
					                        color: '#73DD39'
					                    },
					                    {
					                        offset: 1,
					                        color: '#73DDFF'
					                    }
					                ]),
					                shadowColor: 'rgba(115,221,255, 0.3)',
					                shadowBlur: 10,
					                shadowOffsetY: 20
					            },
					            itemStyle: {
					                normal: {
					                    color: that.colorList[1],
					                    borderColor: that.colorList[1]
					                }
					            }
					        }
					    ]
				})
			}
		}
	}
</script>
